<template>
  <el-form class="detail-info" label-width="140px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="签约ID:">
          <span>{{ agreementInfo.agreement_no }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="所属项目:">
          <span>{{ agreementInfo.app_id|translateToName(permission_projectList,'app_id','name') }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="渠道:">
          <span>{{ agreementInfo.union_id | translateToName(channelOptions, 'channel_id', 'name')}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="版本:">
          <span>{{ agreementInfo.version }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="权益包名称:">
          <span>{{ agreementInfo.attr_name }}</span>
        </el-form-item>
      </el-col>
     <el-col :span="12">
        <el-form-item label="签约名称:">
          <span>{{ agreementInfo.name }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="续费周期:">
          {{ agreementInfo.period }}{{ agreementInfo.period_type|periodTypeFilter }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="原始周期扣费价格:">
          <span>{{ agreementInfo.currency_code | formatMoneyCode }}{{ agreementInfo.single_amount | formatMoney}}</span>
        </el-form-item>
      </el-col>
     <el-col :span="12">
        <el-form-item label="最新周期扣费价格:">
          <span>{{ agreementInfo.new_single_amount | formatMoneyCode }}{{ agreementInfo.new_single_amount | formatMoney}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="签约类型:">
          <span>{{ agreementInfo.sign_type ==='pay_and_sign' ? '支付并签约' : '仅签约' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付方式:">
          <span>{{ typeFormat(agreementInfo) }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="微信模板ID:">
          <span>{{ agreementInfo.wechat_plant_id || '--'}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="首次续费日期:">
          <span>{{ agreementInfo.execute_time|| '--' }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="下次扣费时间:">
          <span v-if="agreementInfo.next_execute_time">{{ agreementInfo.next_execute_time|parseTime() }}</span>
          <span v-else>--</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="创建时间:">
          <span v-if="agreementInfo.created_at">{{ agreementInfo.created_at|parseTime() }}</span>
          <span v-else>--</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="签约时间:">
          <span v-if="agreementInfo.signed_at">{{ agreementInfo.signed_at|parseTime() }}</span>
          <span v-else>--</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="解约时间:">
          <span v-if="agreementInfo.unsigned_at">{{ agreementInfo.unsigned_at|parseTime() }}</span>
          <span v-else>--</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户ID:">
          <el-button type="text" @click="handleUserDetail">{{agreementInfo.user_id}}</el-button>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="首次订单ID:">
          <span>{{ agreementInfo.first_order_id }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="签约状态:">
          <span>
            {{ agreementInfo.status ==='signed_success' ? '已签约' : agreementInfo.status ==='unsigned_success' ? '已解约' : '未签约' }}
          </span>
        </el-form-item>
      </el-col>

      <template v-if="agreementInfo.product_bus_ext && agreementInfo.product_bus_ext.gifts && agreementInfo.product_bus_ext.gifts[0]">
        <el-col :span="24">
          <div class="modules-title">
            <span>赠送配置</span>
          </div>
        </el-col>
        <el-col :span="12">
          <el-form-item label="赠送内容:">
            <template >
              <span>
                {{ agreementInfo.product_bus_ext.gifts[0].amount }}{{ agreementInfo.product_bus_ext.gifts[0].unit_id|translateToName(chargeUnitList,'unit_id','name') }}
              </span>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="使用期限:">
            {{ memberTimeOptions.get(agreementInfo.product_bus_ext.gifts[0].duration) }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="赠送描述:">
            {{ agreementInfo.product_bus_ext.gifts[0].desc }}
          </el-form-item>
        </el-col>
      </template>

    </el-row>
  </el-form>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'OrderDetail',
  props: {
    agreementInfo: {
      type: Object,
      require: true
    },
    payTypeOptions: {
      type: Array,
      default: () => []
    },
    channelOptions: {
      type: Array,
      default: () => []
    },
    chargeUnitList: {
      type: Array,
      default: () => []
    },
    memberTimeOptions: {
      type: Map,
      default: () => {}
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  filters: {
    periodTypeFilter (val) {
      switch (val) {
        case 'DAY':
          return '天'
        case 'MONTH':
          return '月'
        default:
          return ''
      }
    }
  },
  methods: {
    // 支付方式内置字典翻译
    typeFormat (row, column) {
      return this.selectDictLabel(this.payTypeOptions, row.pay_type)
    },
    handleUserDetail () {
      this.$emit('handleUserDetail', this.agreementInfo)
    }
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .el-form-item--medium .el-form-item__content, /deep/ .el-form-item--medium .el-form-item__label{
      line-height: 1.5
  }
  /deep/ .el-button--text {
    padding: 0;
  }
</style>
